<style type="text/css">
    .action-cell {
        margin-bottom: 20px;
    }

    .search-block {
        display: flex;
        margin-bottom: 10px;
    }

    .input-search {
        margin-right: 10px;
    }
</style>
<template>
    <div>
        <div class="holiday-list-mian">
            <h4>审核规则</h4>
            <Alert show-icon>
                此处显示请假规则。
            </Alert>
            <ButtonGroup>
                <Button type="success" @click="jumpPage('','HolidayRuleAdd')">
                    <Icon type="md-add-circle"/>
                    添加
                </Button>
                <Button type="warning" :disabled="deleteBtnEnable" @click="remove">
                    <Icon type="md-close-circle"/>
                    删除
                </Button>
            </ButtonGroup>
            <Row>
                <Col>
                    <Table :context="self" :data="tableData" :columns="tableColumns" stripe border
                           @on-select="tableItemChecked" @on-select-cancel="tableItemChecked"
                           @on-select-all="tableItemChecked"
                           @on-select-all-cancel="tableItemChecked"
                           style="margin-top:15px;">
                    </Table>
                </Col>
            </Row>
        </div>
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';

    export default {
        data() {
            return {
                //操作按钮状态管理
                deleteBtnEnable: true,
                selectedItems: [],
                self: this,
                tableData: [],
                //
                total: 0,
                current: 1,
                tableColumns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '规则适用范围',
                        key: 'Forusetype',
                        align: 'center',
                        render: function (h, params) {
                            return h('span', params.row.Forusetype == 1 ? '请假' : '车辆')
                        }
                    },
                    {
                        title: '规则适用类型',
                        key: 'Isworkdayuse',
                        align: 'center',
                        render: function (h, params) {
                            return h('span', params.row.Isworkdayuse ? '工作日适用' : '非工作日适用')
                        }
                    },
                    {
                        title: '适用人员',
                        key: 'ForuserlevelName',
                        align: 'center',
                    },
                    {
                        title: '起始节点',
                        key: 'Minhour',
                        align: 'center',
                        render: function (h, params) {
                            return h('span', params.row.Minhour ? params.row.Minhour : 0)
                        }
                    },
                    {
                        title: '终止节点',
                        key: 'Maxhour',
                        align: 'center',
                        render: function (h, params) {
                            return h('span', params.row.Maxhour ? params.row.Maxhour : 0)
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'warning',
                                            size: 'small'
                                        },
                                        style: {
                                            'margin-right': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                this.jumpPage(params.row.Id, 'HolidayRuleEdit')
                                            }
                                        }
                                    }, '编辑'),
                                ]
                            )
                        }
                    }
                ]
            }
        },
        mounted() {
            this.mockTableData();
        },
        methods: {
            //跳转
            jumpPage: function (id, url) {
                //跳转
                let route = '';
                if (id > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }

                this.$router.push(route);
            },
            mockTableData() {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetRule, para, function (res) {
                    that.$Loading.finish();
                    that.tableData = res.Msg;
                });

            },
            // 表格内选中及取消选中操作
            tableItemChecked: function (selection, row) {

                this.selectedItems = selection;
                console.log('选择删除项:', selection);

                if (this.selectedItems.length > 1) {
                    // 此处添加不要多选的提示
                    this.$Message.warning('此处不允许批量删除 ');
                    this.deleteBtnEnable = true;

                } else {
                    this.deleteBtnEnable = false;
                }
            },
            //删除
            remove() {
                let self = this;
                let that = this;
                this.$Modal.confirm({
                    title: '操作警告',
                    content: '即将删除选中的项，该操作不可逆转，请确认您的操作。',
                    onOk: function () {
                        this.$Loading.start();
                        var selectedItemIds = "";
                        for (var i = 0; i < that.selectedItems.length; i++) {
                            selectedItemIds += that.selectedItems[i].Id.toString() + ",";
                        }
                        selectedItemIds = selectedItemIds.substring(0, selectedItemIds.length - 1);
                        let para = {id: selectedItemIds};
                        let params = that.$qs.stringify(para);
                        apiUtil.post(that, apiUtil.urls.DelRule, params, function (res) {
                            that.mockTableData();
                        });
                    }
                });
            },
            changePage(row) {
                // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
                console.log("row", row);
                this.current = row;
                this.mockTableData();
            },

        },
    }
</script>
